<!DOCTYPE html>
<html>
<head>
    <title>Чатик</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- Link custom CSS -->
    <link rel="stylesheet" href="files/css.css">

    <!-- Inline CSS -->
    <style>
        #message {
            border: 1mm ridge;
        }

        .message {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }

        .message p {
            margin: 0;
        }
    </style>
</head>

<body>
<br>
    <div class="container">
        <form id="message-form" action="">
            <div class="form-group">
                <label for="message-input">Сообщение:</label>
                <input type="text" class="form-control" id="message-input">
            </div>
            <button type="submit" class="btn btn-primary">Отправить</button>
            <button type="button" class="btn btn-danger" onclick="exitRoom()">Выход</button>
        </form>
        <br>
        <b>Последние сообщения:</b>
        <br>
        <div id="messages">
            {% for i in range(0, leng) %}
                <div class="message">
                    <p><b>{{ old[i][1] }}</b> ({{ old[i][3] }})</p>
                    <p>{{ old[i][2] }}</p>
                </div>
            {% endfor %}
        </div>
    </div>

    <!-- Link Socket.io -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.min.js"></script>

    <script type="text/javascript">
        function getCookie(name) {
            var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
            return matches ? decodeURIComponent(matches[1]) : undefined;
        }

        var socket = io.connect();
        var messageForm = document.getElementById('message-form');
        var messageInput = document.getElementById('message-input');
        var messages = document.getElementById('messages');

        messageForm.addEventListener('submit', function(e) {
            e.preventDefault();
            socket.send(messageInput.value);
            messageInput.value = '';
        });

         socket.on('message', function(message) {
            var messageElement = document.createElement('div');
            messageElement.setAttribute("class", "message");
            messageElement.innerHTML = message;
            messages.prepend(messageElement);
        });

        function exitRoom() {
            document.cookie.split(';').forEach(function(c) {
                document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/');
            });
            location.reload();
        }
    </script>

    <!-- Link Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>